import Taro, { Component } from '@tarojs/taro'
import './index.scss'
import {View, Canvas, Button, Image} from "@tarojs/components";

export default class ShareImg extends Component{
  constructor(props) {
    super(props)
    this.state = {
      hidden: true,
      prurl: null
    }
    this.drawImage()
  }

  componentDidMount() {
    //this.drawImage()
  }

  drawImage = () => {
    let promise1 = new Promise(function (resolve, reject) {
      Taro.getImageInfo({
        src: 'cloud://jianeryanzhi-8a5cf1.6a69-jianeryanzhi-8a5cf1/images/qrcode.jpg',
        success: function (res) {
          console.log(res)
          resolve(res);
        }
      })
    });
    let promise2 = new Promise(function (resolve, reject) {
      Taro.getImageInfo({
        src: 'cloud://jianeryanzhi-8a5cf1.6a69-jianeryanzhi-8a5cf1/images/1545352810642.png',
        success: function (res) {
          console.log(res)
          resolve(res);
        }
      })
    });
    Promise.all([
      promise1, promise2
    ]).then(res => {
      const ctx = Taro.createCanvasContext('shareImg')
      console.log('ctx',ctx)
      //主要就是计算好各个图文的位置
      ctx.drawImage(res[0].path, 158, 190, 210, 210)
      ctx.drawImage(res[1].path, 0, 0, 545, 771)
      ctx.setTextAlign('center')
      ctx.setFillStyle('#ffffff')
      ctx.setFontSize(22)
      ctx.fillText('健而言之', 545 / 2, 130)
      ctx.fillText('分享健康生活的图片', 545 / 2, 160)
      ctx.stroke()
      Taro.showToast({
        title: '分享图片生成中...',
        icon: 'loading',
        duration: 1000
      });
      ctx.draw()
      // console.log('create context')
    })
  }

  saveImg = () => {
    const that = this
    //生产环境时 记得这里要加入获取相册授权的代码
    Taro.saveImageToPhotosAlbum({
      filePath: this.state.prurl,
      success(res) {
        Taro.showModal({
          content: '图片已保存到相册，赶紧晒一下吧~',
          showCancel: false,
          confirmText: '好哒',
          confirmColor: '#72B9C3',
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定');
              that.setState({
                hidden: true
              })
            }
          }
        })
      }
    })
  }

  shareImg = () => {
    const that = this
    Taro.showLoading({
      title: '努力生成中...'
    })
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 545,
      height: 771,
      destWidth: 545,
      destHeight: 771,
      canvasId: 'shareImg',
      success: function (res) {
        console.log(res.tempFilePath);
        console.log('temppath')
        that.setState({
          prurl: res.tempFilePath,
          hidden: false
        })
        Taro.hideLoading()
      },
      fail: function (res) {
        console.log(res)
      }
    }, this.$scope)
    console.log(this.$scope)
  }

  render () {
    return (
      <View>
        <Canvas canvasId="shareImg"
                style="width:545px;height:771px"
                disableScroll={true}
        ></Canvas>


        <View hidden={this.state.hidden} class='preview'>
          <Image src={this.state.prurl} mode='widthFix'></Image>
          <Button type='primary' size='mini' onClick={this.saveImg.bind(this)}>保存分享图</Button>
        </View>

        <Button class='share' type='primary' onClick={this.shareImg.bind(this) } >生成分享图</Button>
      </View>
    )
  }
}
